<template>
<div class="admin">
    <!-- hello -->
    
    <!-- navs -->
    <div class="navs" v-bind:style="navsStyleObj">
        <!-- <el-radio-group v-model="isHiddenNavs" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group> -->

        <el-menu  
            default-active="1-4-1" 
            class="el-menu-vertical-demo" 
            @open="handleOpen" 
            @close="handleClose" 
            :collapse="isHiddenNavs"
            background-color="#263445"
            text-color="rgb(191, 203, 217)"
            :collapse-transition="false"
        >
        
            <router-link to="/">
            <el-menu-item index="1">
                <i class="iconfont icon-shouye"></i>
                <span slot="title">后台首页</span>
            </el-menu-item>
            </router-link>

            <el-submenu index="2">
                <template slot="title">
                <i class="iconfont icon-shangpinguanli"></i>
                <span slot="title">商品管理</span>
                </template>
                
                <router-link to="/goods">
                <el-menu-item index="2-1">商品列表</el-menu-item>
                </router-link>
                <router-link to="/goodsCreate">
                <el-menu-item index="2-2">商品添加</el-menu-item>
                </router-link>
            </el-submenu>

            <el-submenu index="3">
                <template slot="title">
                <i class="iconfont icon-dingdanguanli"></i>
                <span slot="title">订单管理</span>
                </template>

                <router-link to="/orders">
                <el-menu-item index="3-1">订单列表</el-menu-item>
                </router-link>
                <router-link to="/ordersTotal">
                <el-menu-item index="3-2">订单统计</el-menu-item>
                </router-link>
            </el-submenu>

            <el-submenu index="4">
                <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <i class="iconfont icon-yonghuguanli"></i>
                <span slot="title">用户管理</span>
                </template>
                
                <el-menu-item index="4-1">用户列表</el-menu-item>
                <el-menu-item index="4-2">用户添加</el-menu-item>
            </el-submenu>

            <el-submenu index="5">
                <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <i class="iconfont icon-quanxianguanli-"></i>
                <span slot="title">权限管理</span>
                </template>
                
                <el-menu-item index="5-1">角色管理</el-menu-item>
                <el-menu-item index="5-2">权限管理</el-menu-item>
            </el-submenu>

        </el-menu>
    </div>
    <!-- /navs -->

    <!-- main -->
    <div class="main">
        <div class="navbar">
            <div class="l">
                <i class="el-icon-s-unfold" @click="navsFn"></i>
            </div>
            <div class="r"></div>
        </div>
        <router-view />
    </div>
    <!-- /main -->
</div>
</template>

<script>
  export default {
    data() {
      return {
        // 控制导航是否显示
        isHiddenNavs: false,
        navsStyleObj: {width: '200px'}
      };
    },
    methods: {
      // 控制导航隐藏显示
      navsFn() {
          this.isHiddenNavs = !this.isHiddenNavs
          // isHiddenNavs真-44px   isHiddenNavs假-200px
          this.navsStyleObj = this.isHiddenNavs ? {width: '44px'} : {width: '200px'} 
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
// admin
.admin {
    width:100%;
    height: 100%;
    background: #ccc;
    // overflow: hidden;
    display: flex;

    // navs
    .navs {
        width: 200px;
        height: 100%;
        background: #263445;
        overflow: hidden;
        padding-right: 20px;

        // el-menu
        .el-menu { border:none; }

        // iconfont
        .iconfont {
            color: rgb(191, 203, 217);
            display: inline-block;
            margin-right: 8px;
        }
        .icon-yonghu {font-size: 18px;}

        // a
        a {color:rgb(191, 203, 217);text-decoration: none;}
        a:active {color:rgb(191, 203, 217);text-decoration: none;}
    }

    // main
    .main {
        width: 100%;

        // navbar
        .navbar {
            width: 100%;
            height: 50px;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0,21,41,.08);
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;

            // l
            .l {
                width: 400px;
                height: 100%;
                background: red;
                overflow: hidden;
                display: flex;
                align-items: center;

                .el-icon-s-unfold { font-size: 30px; cursor: pointer;}
            }
            // r
            .r {
                width: 400px;
                height: 100%;
                background: blue;
            }
        }
    }
}
</style>